<template>
    <el-cascader placeholder="请选择地区" size="small" :options="options" v-model="selectedOptions" :disabled="disabled" @change="changeArea"></el-cascader>
</template>

<script>
import { regionData, CodeToText } from 'element-china-area-data'

export default{
    props: ["value", "disabled"],
    data(){
        return {
            options: regionData,
            selectedOptions: [],
        }
    },
    watch: {
        value: {
            handler(value){
                this.selectedOptions = value.split(",");
            }
        }
    },
    methods: {
        changeArea(area){
            let value = "";
            area.forEach((e, index)=>{
                if(index == 0){
                    value += e;
                }else{
                    value += "," + e;
                }
            })
            this.$emit('update:value', value);
        }
    }
}
</script>

<style>
</style>